import { Layout, Menu } from 'antd';
import { Component } from 'react';
import { Route } from 'react-router-dom'
import React from 'react'
import './index.css'
import * as icon from '@ant-design/icons';
import methods from '@/untils/methods.js'
import navData from '../../untils/navData';
import Index from '../index'
import Orther from '../orther'
import Says from '../says'
import Tree from '../tree'
import Comment from '../comment'
import toPage from '../../untils/route';
import { User, Flex, RightBar } from '@/components'
import About from '../about';

const { Header, Sider, Content } = Layout;

export default class Home extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };


  handleNav(history, route) {
    toPage(history, route)
  }
  render() {
    return (
      <Layout >
        <Sider trigger={null} collapsible collapsed={this.state.collapsed} collapsedWidth={methods.getDevice()}>
          <User icon={require('@/static/img/user.png')} />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {
              navData.map(item => {

                return <Menu.Item key={item.key} icon={methods.icon(item.icon)} onClick={() => { this.handleNav(this.props.history, item.path) }}>
                  {item.title}
                </Menu.Item>
              })
            }
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background shadow" style={{ paddingLeft: 20, boxShadow: '2px 2px 10px #06c' }}>
            {React.createElement(this.state.collapsed ? icon['MenuUnfoldOutlined'] : icon['MenuFoldOutlined'], {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>
          <Content
            className='site-background'
            style={{

              overflow: 'auto'

            }}
          >

            <Flex>
              <div className=' contentBox'>
                <Route exact path='/home' component={Index}></Route>
                <Route path='/home/says' component={Says}></Route>
                <Route path='/home/orther' component={Orther}></Route>
                <Route path='/home/comment' component={Comment}></Route>
                <Route path='/home/tree' component={Tree}></Route>
                <Route path='/home/about' component={About}></Route>

              </div>
              <RightBar></RightBar>
            </Flex>
            <div className='footer'>
              Powered by YH
            </div>
          </Content>

        </Layout>

      </Layout>

    );
  }
}

